<template>
  <div class="recharge">
    <div class="main">
      <div class="header">
        充值送积分倍数
        <el-input v-model="rechargeValue" placeholder="请输入积分"></el-input>
      </div>

      <div class="block">
        <div class="title">充值金额配置（元）</div>

        <div class="list" v-for="(item, index) in priceList" :key="index">
          <div class="input">
            <el-input
              v-model="item.price"
              placeholder="请输入配置金额"
            ></el-input>
          </div>

          <div
            class="list-img"
            v-if="priceList.length > 1"
            @click="plusClick(index)"
          >
            <img
              src="@/assets/images/jian.png"
              alt=""
              @click="subtractClick(index)"
            />
          </div>
          <div class="list-img">
            <img
              src="@/assets/images/jia.png"
              alt=""
              @click="plusClick(index)"
            />
          </div>
        </div>
      </div>

      <div class="button">
        <div class="list">保存</div>
      </div>
    </div>
  </div>
</template>


<script>


export default {
  data() {
    return {
      rechargeValue: "",
      //---------
      priceList: [
        {
          price: "",
        },
      ],
    };
  },
  methods: {
    plusClick() {
      let obj = {
        price: "",
      };

      this.priceList.push(obj);
    },
    subtractClick(index) {
      this.priceList.splice(index, 1);
    },
  },
};
</script>

<style lang="less" scoped>
.recharge {
  .main {
    .header {
      padding: 0 0 10px;
      box-sizing: border-box;
      border-bottom: 1px solid #ccc;
      /deep/ .el-input {
        width: 300px;
        margin: 0 10px;
      }
    }

    .block {
      margin-top: 20px;

      .title {
        margin-bottom: 10px;
      }

      .list {
        display: flex;
        align-items: center;
        margin-bottom: 10px;

        /deep/ .el-input {
          width: 300px;
        }

        .list-img {
          margin-left: 20px;

          img {
            width: 20px;
            height: 20px;
            cursor: pointer;
          }
        }
      }
    }

    .button {
      display: flex;
      align-items: center;
      margin-top: 100px;
      .list {
        background: #3da8f5;
        color: #fff;
        font-size: 16px;
        margin-right: 20px;
        border-radius: 5px;
        width: 80px;
        height: 35px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }
    }
  }
}
</style>